<template>
	<div class="persons" v-show="editPage">
		<div class="contain">
			<div :class="['warn',hidden]" style="transition: all 1s;">{{warninfor}}</div>
			<div class="close" @click="openEdit" title="关闭"><span>×</span></div>
			<h4 class="title">我的名片</h4>
			<div class="expore"><span>修改以下信息来更新你的名片哦</span></div>
			<ul>
				<li>
					<span>姓名<span class='need'>*</span></span>
					<input type="text" maxlength="18" placeholder="请输入您的姓名" v-model="nowinfor[0]">
				</li>
				<li @click="openSex">
					<span>性别<span class='need'>*</span></span>
					<input type="button" v-model="nowinfor[1]">
					<div class="choose_outer" v-show="sexlist">
						<div class="choose">
							<button v-for="val in sexs" @click="chSex(val)">{{val}}</button>
							<div style="width:0;"></div>
						</div>
					</div>
				</li>
				<li>
					<span>年龄<span class='need'>*</span></span>
					<input type="text" maxlength="3" placeholder="请输入您的年龄"  v-model="nowinfor[2]">
				</li>
				<li @click="openEdu">
					<span>最高学历<span class='need'>*</span></span>
					<input type="button"  v-model="nowinfor[3]">
					<div class="choose_outer" v-show="edulist">
						<div class="choose">
							<button v-for="val in edus" @click="chEdu(val)">{{val}}</button>
							<div style="width:0;"></div>
						</div>
					</div>
				</li>
				<li>
					<span>毕业院校<span class='need'>*</span></span>
					<input type="text" maxlength="15" placeholder="请输入您的院校"  v-model="nowinfor[4]">
				</li>
				<li>
					<span>主修专业<span class='need'>*</span></span>
					<input type="text" maxlength="18"  placeholder="请填写您的专业"  v-model="nowinfor[5]">
				</li>
				<li  @click="openGradu">
					<span>毕业时间<span class='need'>*</span></span>
					<input type="button" v-model="nowinfor[6]">
					<div class="choose_outer" v-show="gradulist">
						<div class="choose">
							<button v-for="val in gradus" @click="chGradu(val)">{{val}}</button>
							<div style="width:0;"></div>
						</div>
					</div>
				</li>
				<li>
					<span>电话<span class='need'>*</span></span>
					<input type="text" maxlength="18"  placeholder="请填写您的手机号"  v-model="nowinfor[7]">
				</li>
				<li>
					<span>邮箱</span>
					<input type="text" maxlength="18" placeholder="请填写您的邮箱"  v-model="nowinfor[8]">
				</li>
				<button class="sub" @click="changeInfor">确认</button>
			</ul>
		</div>
	</div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default{
	name:'Person',
	computed:{
		...mapState(['editPage','nowinfor'])
	},
	data(){
		return{
			warninfor:'请完善您的必填信息!',
			hidden: '',
			sexs:['男','女'],
			sexlist:false,
			edus: ['高中','专科','本科','硕士','博士'],
			edulist:false,
			gradus: ['2017届','2018届','2019届','2020届','2021届','2022届','2023届','2024届'],
			gradulist:false,
		}
	},
	methods:{
		...mapMutations(['openEdit','getInfor']),
		// 性别选择
		chSex(sex){
			this.nowinfor[1] = sex
		},
		// 展示隐藏性别选择框
		openSex(){
			this.sexlist = !this.sexlist
		},
		chEdu(edu){
			this.nowinfor[3] = edu
		},
		// 展示隐藏性别选择框
		openEdu(){
			this.edulist = !this.edulist
		},
		chGradu(gradu){
			this.nowinfor[6] = gradu
		},
		// 展示隐藏性别选择框
		openGradu(){
			this.gradulist = !this.gradulist
		},
		
		changeInfor(){
			console.log(this.nowinfor)
			let age = typeof parseInt(this.nowinfor[2])
			let tell = typeof parseInt(this.nowinfor[7])
			console.log(tell,age)
			if(this.nowinfor.indexOf('')==-1||this.nowinfor.indexOf('')>7){
				if(age!='number'||tell!='number'){
					this.warninfor = '请检查您的年龄手机号码格式是否正确！'
					this.warn = true
					setTimeout(()=>{this.warn = false},3000)
				}else{
					if(this.nowinfor[2].indexOf('岁')==-1){
						this.nowinfor[2]+='岁'
					}
					let mid = [...this.nowinfor]
					this.getInfor(mid)
					this.openEdit()
				}
			}else{
				this.warninfor = '请完善您的必填信息!'
				this.hidden = 'hid'
				setTimeout(()=>{this.hidden = ''},2000)
			}
		},
	}
}
</script>

<style scoped lang="less">	
	.persons{
		width: 100vw;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
	}
	.contain{
		position: relative;
		width: 400px;
		height: 550px;
		margin: auto;
		margin-top: 100px;
		border-radius: 5px;
		background-color: #fff;
		.hid{ opacity: 1!important;}
		.warn{
			position: absolute;
			top: -60px;
			left: 0px;
			opacity: 0;
			width: 300px;
			transition: opacity 1s;
			height: 30px;
			transition: all 0.5s;
			line-height: 30px;
			margin: auto 50px;
			background-color: #fff;
			border-bottom: 1px solid #f77;
		}
		.close{
			position: absolute;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			font-size: 30px;
			line-height: 25px;
			top: 5px;
			right: 10px;
			color: #222;
			user-select: none;
		}
		.title{
			font-size: 18px;
			padding-top: 15px;
			color: #223;
		}
		.expore{
			font-size: 12px;
			color: #777;
		}
		li{
			position: relative;
			width: 80%;
			height: 30px;
			margin: 10px 40px;
			padding: 5px 0 0 5px;
			text-align: left;
			background-color: #f7f7f7;
			span{
				display: inline-block;
				width: 75px;
				line-height: 30px;
				font-weight: 700;
				color: #222;
				.need{
					width: 12px;
					color: #f44;
					font-weight: 500;
				}
			}
			input{
				height: 18px;
				width: 210px;
				outline: none;
				border: none;
				line-height: 18px;
				text-align: left;
				background-color: #f7f7f7;
				font-family: "microsoft sans serif";
			}
			.choose_outer{
				position: absolute;
				top: 36px;
				width: 308px;
				margin-left: -5px;
				max-height: 110px;
				z-index: 10;
				border: 1px solid #caa;
				overflow: hidden;
			}
			.choose{
				width: 350px;
				max-height: 110px;
				overflow: auto;
				background-color: red;
				z-index: 12;
				button{
					padding-left: 20px;
					display: block;
					width: 100%;
					height: 27px;
					text-align: left;
					outline: none;
					border: none;
					background-color: #fff;
					z-index: 99;
				}
				button:hover{
					background-color: #5087ff;
					color: #fff;
				}
			}
		}
		.sub{
			width: 60%;
			height: 30px;
			margin-top: 30px;
			background-color: #07a4d8;
			color: #fff;
			font-size: 16px;
			border-radius: 4px;
			border: none;
			outline: none;
		}
	}
</style>